/*!*********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/




.x2-remote-page {

.detail-view {
    .field-link-container:not(.multiple-links) {
        position: relative;
        cursor: pointer;
        .field-value a {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding-top: 29px;
            padding-left: 10px;
        }
        
    }
    .field-container {
        &[data-x2-field-type="text"] {
            height: auto;
            min-height: $itemHeight;
        }
        display: block;
        a {
            text-decoration: none;
        }
        @include list-item;
        .field-label {
            @include list-item-label;
        }
    }
}

$highlightHeight: 4px;
.ui-navbar.record-view-tabs-nav-bar {
    position: fixed;
    width: 100%;
    background: white;
    z-index: 1000;
    padding: 0;
    top: $headerHeight;
    .record-view-tab {
        //padding-top: $tabContentPadding;
        //padding-bottom: $tabContentPadding - $highlightHeight;
        //text-transform: uppercase;
        //font-weight: bold;
        &.ui-state-active {
            a {
                border-bottom: $highlightHeight solid $itemBorderColor; 
            }
        }
        .ui-tabs-anchor:active, .ui-tabs-anchor:focus{
             outline:none;
        }
        //width: 50%;
        //display: inline-block;
        a {
            height: $tabHeight;
            line-height: $tabHeight;
            width: 100%;
            padding: 0;
            //display: inline-block;
            text-align: center;
            text-decoration: none;
            color: gray;
        }
    }
    border-bottom: 1px solid $itemBorderColor;
}

&.mobile-view {
    .field-container {
        @include btn-states(0.05);
    }

    //$tabContentPadding: ;

    .record-view-tabs {
        height: 100%;
        padding: 0;
    }

    $iconContainerWidth: 50px;
    .action-history {
        .empty {
            @include no-data-message;
        }
        .record-list-item {
            .icon {
                //@include generate-icons($fa-map);
                //@include generate-icons($x2-map, 'x2');
            }
            cursor: default;
            padding: 0;
            height: auto;
            min-height: $itemHeight;
            width: 100%;
            display: table;
            .history-attachment-image {
                img {
                    max-width: 70%;
                }
            }
            .history-attachment-download-link {
                text-decoration: none;
            }
            .icon-container {
                display: table-cell;
                width: $iconContainerWidth;
                height: 100%;
                text-align: center;
                &, .icon::before {
                    font-size: 28px;
                    color: gray;
                }
                vertical-align: middle;
            }
            .history-item-content-container-outer {
                display: table-cell;
                overflow: hidden;
                min-height: $itemHeight;
                & > * {
                    padding: 5px 0;
                }
                vertical-align: top;
                .history-item-date-line {
                    color: $subduedTextColor;
                    font-size: $labelFontSize;
                }
            }
        }
    }
}

$publisherMenuAnimLength: 0.5s;
//$publisherMenuAnimLength: 30s;
$publisherMenuAnimFn: ease-in-out;
$publisherMenuAnimDelay: 0s;
$publisherMenuTogglePos: 26px;
$publisherMenuHeight: 128px;
$publisherMenuHeightBrowser: 64px;

@mixin publisher-button-animation($menuHeight,$keyframesName) {
    .fixed-corner-button.publisher-menu-button.active {
        @include animation($publisherMenuAnimLength $publisherMenuAnimFn $publisherMenuAnimDelay $keyframesName);
        @include keyframes($keyframesName) {
            from { 
            }
            to { 
                bottom: $menuHeight - $publisherMenuTogglePos;
                transform: rotate(0.125turn);
                box-shadow: none;
            }
        }
        @include animation-fill-mode(forwards);
    }
}

.publisher-menu-button {
    display: none;
}
    
.location-action-attachment-button {
   height:$publisherMenuHeight/2;
   width: 100%;
   background: transparent;
   border: none !important;
   outline:none;
   left: 235px;
   top: 4px;
}

&[data-x2-tab-name='record-details'] {
    .publisher-menu-button {
        display: none;
    }
}

&[data-x2-tab-name='action-history'] {
    .publisher-menu-button.active {
        display: block;
    }
}

&[data-x2-tab-name='action-history-attachments'] {
    .publisher-menu-button.active {
        display: block;
    }
}

&.x2touch-android {
    @include publisher-button-animation ($publisherMenuHeight,'makeActivePhoneGap');
    #footer.publisher-menu {
        bottom: -$publisherMenuHeight;
    }
}

&.x2touch-browser, &.x2touch-ios {
    @include publisher-button-animation ($publisherMenuHeightBrowser,'makeActiveBrowser');
    #footer.publisher-menu {
        /*
        .photo-attachment-button {
            display: none;
        }
        .audio-attachment-button {
            display: none;
        }
        .video-attachment-button {
            display: none;
        }*/
        * {
            border: none;
        }
    }
    #footer.publisher-menu {
        bottom: -$publisherMenuHeightBrowser;
    }
}

#footer.publisher-menu {
    width: 100%;
    border-bottom: none;
    border-top: 1px solid $itemBorderColor;
    background: white;
    display: none;
    height: 0;
    ul {
        list-style-type: none;
        padding-left: 0;
        margin: 0;
        li {
            @include btn-states(0.05);
            position: relative;
            cursor: pointer;
            border-top: 1px solid $itemBorderColor;
            &:first-child {
                border-top: none;
            }
            & > * {
                display: inline-block;
            }
            & > span {
                padding: 20px;
                text-align: center;
                color: $iconButtonColor;
                font-size: 20px;
            }
            form.publisher-file-upload-form {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                height: 100%;
                .ui-input-text {
                    border: none;
                    margin: 0;
                    height: 100%;
                    input[type="file"] {
                        width: 200%;
                        position: absolute;
                        height: 100%;
                        left: -207px;
                    }
                }
            }
        }
    }
    &.active {
        display: block;
        height: auto;
        @include animation($publisherMenuAnimLength $publisherMenuAnimFn $publisherMenuAnimDelay openPublisherMenu);
        @include keyframes(openPublisherMenu) {
            from { 
            }
            to { 
                bottom: 0px;
            }
        }
        @include animation-fill-mode(forwards);
    }
}

&.mobile-view.has-settings-menu {
    #header {
        .edit-button {
            right: $headerIconBtnWidth !important;
        }
    }
}

&.mobile-profile-view {
    @include avatar(120px);
    .profile-header {
        text-align: center;
        padding: 16px 0 10px 0;
        border-bottom: 1px solid $itemBorderColor;
        .avatar-image {
            cursor: pointer;
        }
        .photo-upload-link {
            text-decoration: none;
            font-size: 10px;
        }
        .full-name {
            padding: 8px 0 0 0;
        }
    }
}

}
